<%--
  Created by IntelliJ IDEA.
  User: 18042986105
  Date: 2021/5/19
  Time: 10:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../user/toolbarDemo.jsp"%>
<%@include file="customer-add-layer.jsp"%>
<%@include file="customer-edit-layer.jsp"%>
<%@include file="search-form.jsp"%>
<html>
<head>
    <title>Title</title>
</head>
<body>



<table class="layui-hide"  id="test"  lay-filter="test"></table>
<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>
<script src="./layui/layui.js" charset="utf-8"></script>

<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var $ = layui.$;
        var form=layui.form;

        table.render({
            elem: '#test'
            ,url:'/customer/getAllCustomer'
            ,toolbar: '#toolbarDemo'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:3
                ,limits:[2,3,5]
                ,groups: 3 //只显示 1 个连续页码

            }
            ,cols: [[
                {type:'checkbox'},
                {field:'id', title: 'ID', sort: true}
                ,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'password', title: '密码', sort: true}
                ,{field:'nickname', title: '公司名称'}
                ,{field:'address', title: '公司地址'}
                ,{field:'money', title: '工资', align: 'center'} //单元格内容水平居中
                ,{field:'state', title: '状态',templet:function(data){
                        return data.state=='1'?'<div style="background-color: #085820;color: white;width: 80px;height:25px;">激活</div>':'未激活';}}
                ,{field:'operate', title: '操作',toolbar: '#user-edit-bar',width:180}
                
            ]]
        });
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    openEditWindow();
                    break;
                case 'delete':
                    var data = table.checkStatus('test').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            });
                            $.ajax({
                                url: '/customer/delete',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('test', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;

            }
        });

        function openEditWindow(data){
            //弹出层
            layer.open({
                type: 1,
                title:'添加',
                area: ['500px', '400px'],
                btn: ['确认', '取消'],
                content: data==null?$('#user-add-layer').html():$('#user-edit-layer').html(),
                success: function(layero, index){
                    //加载完成的各种渲染
                    form.render();

                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }

                },
                yes: function(index, layero){
                    //点击确认  调用的操作
                    $.ajax({
                        url: "/customer/"+(data==null?'add':'update'),
                        //  url: '/sys/customer/update',
                        data: data == null ?$("#user-add-form").serialize():$("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('test', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }
            })
        }

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }

            }
        });

        //校验
        form.verify({
            name:function(value){
                if(value.length<2 && value.length>0){
                    return '至少有两个字符啊';
                }
            }
            //官方文档里面有很多
        });

        // 监听提交
        form.on('submit(user-search)',function(data){
            table.reload('test',{
                page:{
                    curr:1
                },
                where :data.field
            });
            return false;
        })
        //结尾
    });
</script>

</body>
</html>